<template>
	<view class="layout">
		<post-nav-bar title="生成结果"></post-nav-bar>
		<view class="ai-view">
			<view class="name">{{aiData.name}}</view>
			<image :src="imageSrc" mode="aspectFill"></image>
			<view class="sub-title">食材信息</view>
			<view class="material" v-html="aiData.material"></view>
			<view class="sub-title">制作步骤</view>
			<view class="content" v-html="aiData.body"></view>

		</view>
		<view class="section-title">搜索推荐</view>
		<view class="white-space" v-if="searchList.length == 0">暂无推荐</view>
		<view class="search-list" v-else>
			<Line></Line>
			<view class="result" v-for="(item, index) in searchList" :key="index" @click="goPost(item.dishId)">
				<view class="result-content">
					<image :src="getImage(item.imageUrl)" mode="aspectFill" class="result-image"></image>
					<view class="result-count-info">
						<view class="result-counts">
							<uni-icons type="hand-up" color="#ffffff" size="18"></uni-icons>
							<text>{{ format(item.likes) }}</text>
						</view>
						<view class="result-counts">
							<uni-icons type="star" color="#ffffff" size="18"></uni-icons>
							<text>{{ format(item.favorites) }}</text>
						</view>
					</view>
					<view class="result-info">
						<view class="title">
							<up-text :lines="2" :text="item.name" size="16"></up-text>
						</view>
						<view class="user">
							<uni-icons type="person" color="#888" size="18"></uni-icons>
							<text>{{ item.username }}</text>
						</view>
						<view class="views">
							<uni-icons type="eye" color="#888" size="19"></uni-icons>
							<text>{{ format(item.views) }}</text>
						</view>
					</view>
				</view>
				<Line></Line>
			</view>
			<up-gap height="10"></up-gap>
			<up-loadmore :line="true" status="nomore"></up-loadmore>
			<up-gap height="10"></up-gap>
		</view>
		<up-back-top :scroll-top="scrollTop" :iconStyle="iconStyle" :customStyle="customStyle"></up-back-top>
	</view>
</template>

<script setup>
	import Line from '@/components/Line.vue'
	import {
		ref,
		createApp,
		onMounted,
		reactive
	} from 'vue';
	import {
		appUrl
	} from '../../main';
	import {
		onPageScroll
	} from '@dcloudio/uni-app';
	let aiData = reactive({
		name: "",
		material: "",
		body: ""
	})
	let imageSrc = ref("");

	const scrollTop = ref(0);
	const iconStyle = reactive({
		color: '#ffffff'
	});
	const customStyle = reactive({
		background: '#FF4D4F'
	});
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});


	const format = (num) => {
		if (num >= 100000) {
			return Math.round(num / 10000) + "w"
		} else if (num >= 10000) {
			return (Math.round(num / 1000)) / 10 + "w"
		} else {
			return num
		}
	}


	const aiDataInit = (array) => {
		array.forEach(item => {
			if (item.point === "1") {
				// 菜名处理
				aiData.name = item.content.replace("菜名：", "").trim();
			} else if (item.point === "2") {
				// 食材和配料及热量和营养信息处理
				const lines = item.content.replace("食材和配料及热量和营养信息：\n", "").split('\n').map(line => line
					.trim());
				let tableContent = "<table border='1'><tr><th>项目</th><th>详情</th></tr>";
				lines.forEach(line => {
					const parts = line.split('：');
					if (parts.length === 2) { // 确保分割后有两个部分
						const itemName = parts[0].replace(/^\s*-\s*/, '').trim();
						tableContent += `<tr><td>${itemName}</td><td>${parts[1].trim()}</td></tr>`;
					}
				});
				tableContent += "</table>";
				aiData.material = tableContent;
			} else if (item.point === "3") {
				// 步骤处理
				aiData.body = item.content.replace("步骤：\n", "")
					.split('\n')
					.map(step => step.trim())
					.join("<br/><br/>"); // 使用<br/>替换换行符，以便于HTML展示
			}
		})
	}

	const getImage = (path) => {
		return "https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/food_moment_discover/train/data/" + path
	}

	let searchList = ref([]);
	const token = uni.getStorageSync("token");

	const getSearchList = async (content) => {
		try {
			uni.request({
				url: appUrl + '/dish/search',
				header: {
					'token': token
				},
				data: {
					content: content
				},
				method: "POST"
			}).then((res) => {
				if (res.data.status == 200) {
					searchList.value = res.data.data
				} else {
					console.log('服务异常');
				}
			})
		} catch (error) {
			console.error('请求失败:', error);
		}
	}

	const goPost = (id) => {
		uni.setStorageSync('dishId', id)
		uni.navigateTo({
			url: "/pages/PostView/PostView"
		})
	}

	onMounted(() => {
		const resultList = JSON.parse(uni.getStorageSync('aiData'))
		imageSrc.value = uni.getStorageSync('aiImage')
		aiDataInit(resultList)
		getSearchList(aiData.name)

	})
</script>

<style lang="scss" scoped>
	.layout {
		.ai-view {
			padding: 30rpx;

			.name {
				display: flex;
				justify-content: center;
				font-size: 30px;
				font-weight: bold;
				margin-bottom: 50rpx;
				background-color: rgba(255, 212, 95, 0.2);
				border-radius: 10px;
			}

			image {
				width: 100%;
				height: 340rpx;
				border-radius: 10rpx;
				margin-bottom: 50rpx;
			}

			.material {
				margin: 0 0 100rpx 0;
			}

			.content {
				padding: 0 0 0 10rpx;
				font-size: 15px;
				margin-bottom: 50rpx;
			}

			.sub-title {
				font-weight: bold;
				text-align: center;
				color: white;
				background-color: #FF4D4F;
				border-radius: 30px;
				padding: 5px;
				margin: 20rpx 0 20rpx 0;
				font-size: 18px;
			}

		}

		.section-title {
			font-size: 20px;
			font-weight: bold;
			padding: 30rpx;
			background-color: rgba(255, 212, 95, 0.2);
		}

		.white-space {
			width: 100%;
			height: 340rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999;
		}

		.result {
			border-radius: 12rpx;
			overflow: hidden;
			position: relative;

			.result-content {
				display: flex;
				align-items: center;
				padding: 20rpx;
				gap: 20rpx;
				border-radius: 10rpx;
				background-color: #FFFFFF;

				.result-count-info {
					position: absolute;
					bottom: 20rpx;
					right: 400rpx;
					display: flex;
					align-items: center;
					padding: 10rpx;
					background-color: rgba(0, 0, 0, 0);
					color: white;
					font-size: 13px;
					gap: 25rpx;

					.result-counts {
						display: flex;
						gap: 4rpx;
						align-items: center;
					}
				}
			}
		}


		.result-image {
			width: 100%;
			height: 250rpx;
			max-width: 380rpx;
			min-width: 380rpx;
			border-radius: 10rpx;
		}

		.result-info {
			.title {
				font-size: 16px;
				color: #333;
				height: 100rpx;
			}

			.user {
				display: flex;
				font-size: 14px;
				color: #999;
				gap: 10rpx;
				align-items: center;
			}

			.views {
				display: flex;
				font-size: 15px;
				color: #999;
				gap: 10rpx;
				align-items: center;
				padding-top: 10rpx;
			}
		}
	}
</style>